<template>
    <div>
        <a-card title="课程管理" style="width: 100%">
            <template #extra> <a-button type="primary" @click="open = true">添加课程</a-button>
            </template>
            <a-table :dataSource="dataSource" :columns="columns">
                <template #operation="{ record }">
                    <a-button style="margin-right: 10px;" type="primary" @click="editCourse(record)">编辑</a-button>
                    <a-button type="primary" danger @click="showConfirmDelete(record)">删除</a-button>
                </template>
            </a-table>
        </a-card>
        <div>
            <a-modal v-model:open="open" title="添加课程">
                <a-input style="margin: 10px 0px 10px 0px;" v-model:value="courseSubmit.courseName" placeholder="请输入课程名称" />
                <a-input v-model:value="courseSubmit.courseIntroduce" placeholder="请输入课程介绍" />
                <template #footer>
                    <a-button key="back" @click="handleCancel">取消</a-button>
                    <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
                </template>
            </a-modal>
        </div>
        <div>
            <a-modal v-model:open="openEdit" title="修改课程">
                <a-input style="margin: 10px 0px 10px 0px;" v-model:value="courseEditSubmit.courseName"
                    placeholder="请输入课程名称" />
                <a-input v-model:value="courseEditSubmit.courseIntroduce" placeholder="请输入课程介绍" />
                <template #footer>
                    <a-button key="back" @click="handleEditCancel">取消</a-button>
                    <a-button key="submit" type="primary" @click="handleEditOk">确定</a-button>
                </template>
            </a-modal>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import course from '../../api/course.js'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
const getAllCourse = async () => {
    const res = await course.getAllCourse()
    dataSource.value = res.data.list
    // 日期处理
    dataSource.value.map(obj => {
        let dateCreate = new Date(obj.gmtCreate);
        let dateModified = new Date(obj.gmtModified);
        obj.gmtCreate = dateCreate.toLocaleString(); // 使用toLocaleString方法可以得到本地化的日期字符串  
        obj.gmtModified = dateModified.toLocaleString();
        return obj;
    })
}

onMounted(() => {
    getAllCourse()
})

const dataSource = ref([]);

const columns = ref([
    {
        title: '课程名称',
        dataIndex: 'courseName',
    },
    {
        title: '课程介绍',
        dataIndex: 'courseIntroduce',
    },
    {
        title: '创建时间',
        dataIndex: 'gmtCreate',
    },
    {
        title: '修改时间',
        dataIndex: 'gmtModified',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        slots: { customRender: "operation" },//绑定插槽

    }
]);

const open = ref(false);
const handleOk = async () => {
    // 添加课程
    const res = await course.addCourse(courseSubmit)
    open.value = false;
    await getAllCourse()
    courseSubmit.courseName = ''
    courseSubmit.courseIntroduce = ''
    console.log("Res:", res)

};
const handleCancel = () => {
    open.value = false;
};

const courseSubmit = reactive({
    courseName: '',
    courseIntroduce: ''
})

const courseEditSubmit = reactive({
    id: 0,
    courseName: '',
    courseIntroduce: ''
})

const openEdit = ref(false)
const handleEditCancel = () => {
    openEdit.value = false;
};

const editCourse = async (record) => {
    openEdit.value = true
    courseEditSubmit.id = record.id
    courseEditSubmit.courseName = record.courseName
    courseEditSubmit.courseIntroduce = record.courseIntroduce
}
// 确定编辑
const handleEditOk = async () => {
    await course.editCourse(courseEditSubmit);
    getAllCourse()
    openEdit.value = false

}
// 点击删除
const deleteCourse = async (record) => {
    await course.deleteCourse(record.id)
    getAllCourse()
}

const showConfirmDelete = (record) => {
    Modal.confirm({
        title: '请确认是否删除此课程',
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
            deleteCourse(record)
        },
        cancelText: '取消',
        okText: '确认',
        onCancel() { },
    });
};

</script>

  
<style scoped></style>
  